<template>
	<view>
		<my-navbar title="放学时间" :border="true"></my-navbar>
		<view class="app-background"></view>
		<view class="changeHometime">
			<view class="changeHometime-section time">
				<view class="time-picker" :class="{ hidden: i_hometime.data.holiday }">
					<picker-view
						class="picker-view"
						:value="i_hometime.data.hometime"
						indicator-style="height: 82rpx;background-color:rgba(205, 206, 207, 0.1);"
						@change="i_hometime.timeChange"
					>
						<picker-view-column>
							<view class="view-item" :class="{ active: j == i_hometime.data.hometime[0] }" v-for="(i, j) in i_hometime.hhs" :key="j">{{ i }}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="view-item" :class="{ active: j == i_hometime.data.hometime[1] }" v-for="(i, j) in i_hometime.mms" :key="j">{{ i }}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="time-item">
					<view class="item-label">周期</view>
					<view class="item-value">
						<view v-for="(i, j) in i_day.data.days" :key="j">
							<text>周{{ leaveMap[i] }}</text>
							<text v-if="j !== i_day.data.days.length - 1">，</text>
						</view>
					</view>
					<image class="item-icon" src="/static/my/icon_right.png"></image>
				</view>
			</view>
			<view class="changeHometime-section day">
				<view class="day-item" :class="{ selected: isDayActive(j) }" v-for="(i, j) in leaveMap" :key="j" @click="i_day.clickItem(j)">{{ i }}</view>
			</view>
			<view class="changeHometime-section holiday">
				<view class="holiday-label">放假</view>
				<switch class="holiday-switch" :checked="i_hometime.data.holiday" color="#FF6600" @change="i_hometime.holidayChange" />
			</view>
			<view class="changeHometime-hint">注：开启放假按钮，则表示选中周期放假</view>
			<!-- 浮动底部 START -->
			<view class="app-offset">
				<view class="changeHometime-button"></view>
				<safe-area></safe-area>
			</view>
			<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
				<view class="changeHometime-button app-button" hover-class="hover" :class="[l_isPass ? '' : 'disabled']" @click="clickSavaButton">保存</view>
				<safe-area></safe-area>
			</view>
			<!-- 浮动底部 END -->
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import form from '@/components/my-form/my-form.js';
import util from '@/common/util';
export default {
	data() {
		return {
			squad: '',
			hometimeData: {
				data: {},
				getData: async () => {
					const context = this.hometimeData;
					const page = {};
					const data = {
						squad: this.squad
					};
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.hometime.get_list({ page, data });
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取放学时间数据失败');
						return;
					}
					context.data = res1.result.data[0] || {};
					uni.hideLoading();
				}
			},
			i_hometime: {
				data: {
					hometime: [0, 0],
					holiday: true
				},
				hhs: [],
				mms: [],
				init: () => {
					const context = this.i_hometime;
					const hhs = [];
					const mms = [];
					for (let i = 0; i < 60; i++) {
						let num = String(i);
						num = num.length < 2 ? '0' + num : num;
						mms.push(num);
						if (i < 24) hhs.push(num);
					}
					this.i_hometime.hhs = hhs;
					this.i_hometime.mms = mms;
				},
				setData: data => {
					const context = this.i_hometime;
					context.data.holiday = data.holiday;
					this.$nextTick(() => {
						context.data.hometime = data.hometime;
					});
				},
				holidayChange: e => {
					this.i_hometime.data.holiday = e.detail.value;
				},
				timeChange: e => {
					this.i_hometime.data.hometime = e.detail.value;
				}
			},
			i_day: {
				data: {
					days: []
				},
				clickItem: key => {
					const context = this.i_day;
					const index = context.data.days.findIndex(i => i === key);
					if (index === -1) {
						context.data.days.push(key);
						// 周期项的日期显示排序
						const leavekeys = Object.keys(this.leaveMap);
						context.data.days.sort((a, b) => {
							const i1 = leavekeys.findIndex(i => i === a);
							const i2 = leavekeys.findIndex(i => i === b);
							return i1 - i2;
						});
					} else {
						context.data.days.splice(index, 1);
					}
				}
			},
			leaveMap: {
				sunLeave: '日',
				monLeave: '一',
				tuesLeave: '二',
				wedLeave: '三',
				thurLeave: '四',
				friLeave: '五',
				satLeave: '六'
			}
		};
	},
	computed: {
		...mapState({
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo
		}),
		l_list() {
			return [this.i_hometime, this.i_day];
		},
		l_isPass() {
			return form.checkListData(this.l_list).length === 0;
		},
		isDayActive() {
			return key => {
				return this.i_day.data.days.find(i => i === key);
			};
		}
	},
	methods: {
		async clickSavaButton() {
			let errors = [];
			errors = form.checkListData(this.l_list, true);
			if (errors.length) {
				const error = errors.find(i => i)[0];
				this.$showToast(error);
				return;
			}
			const listData = form.getListData(this.l_list);
			// 处理时间
			let hh = String(listData.hometime[0]);
			hh = hh.length === 1 ? '0' + hh : hh;
			let mm = String(listData.hometime[1]);
			mm = mm.length === 1 ? '0' + mm : mm;
			const hometime = hh + ':' + mm;

			const data = {};
			if (this.hometimeData.data.id) {
				// 存在 id 时为修改，可只传 id
				data.id = this.hometimeData.data.id;
			} else {
				// 不存在 id 时为新增，必须传 squad 和 schoolId
				data.squad = this.squad;
				data.schoolId = this.jxyUserInfo.schoolId;
			}
			for (const i of listData.days) {
				data[i] = listData.holiday ? '放假' : hometime;
			}
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.hometime.save(data);
			} catch (err) {
				uni.hideLoading();
				this.$showToast(err.message || '保存失败');
				return;
			}
			this.$showToast('保存成功');
			uni.navigateBack();
		}
	},
	async onLoad(options) {
		this.i_hometime.init(); // 初始化时间选择器

		this.squad = options.squad;
		try {
			await this.hometimeData.getData();
		} catch (err) {}

		const hometime = [];
		const leaveKey = options.leaveKey || '';
		const holiday = this.hometimeData.data[leaveKey] === '放假';
		if (this.hometimeData.data[leaveKey] && !holiday) {
			// 非放假的场合：直接却接口字段的时间
			const hm = this.hometimeData.data[leaveKey].split(':');
			hm[0] = isNaN(hm[0]) ? 0 : Number(hm[0]);
			hm[1] = isNaN(hm[1]) ? 0 : Number(hm[1]);
			hometime.push(...hm);
		} else {
			// 放假、未传 leaveKey 进入页面的场合：默认设置上当天的时间
			const date = new Date();
			hometime.push(...[date.getHours(), date.getMinutes()]);
		}

		const days = [];
		if (leaveKey) days.push(leaveKey);

		form.setListData(this.l_list, {
			holiday,
			hometime,
			days
		});
	}
};
</script>

<style lang="less" scoped>
.changeHometime-section {
	background-color: #ffffff;
	margin-bottom: 20rpx;

	&.time {
		.time-picker {
			height: 452rpx;
			overflow: hidden;

			transition: height 0.3s;

			&.hidden {
				height: 0rpx;
			}

			.picker-view {
				height: 100%;
				text-align: center;

				.view-item {
					line-height: 82rpx;
					font-size: 36rpx;
					color: #222222;

					&.active {
						color: #ff6600;
					}
				}
			}
		}

		.time-item {
			border-top: 2rpx solid #e3e4e6;
			padding: 30rpx;

			font-size: 32rpx;

			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-label {
				color: #222222;
			}

			.item-value {
				flex: 1;

				font-size: 28rpx;
				text-align: right;
				color: #707070;

				display: flex;
				justify-content: flex-end;
			}

			.item-icon {
				width: 14rpx;
				height: 24rpx;
				margin-left: 20rpx;
			}
		}
	}

	&.day {
		padding: 20rpx 30rpx;

		display: flex;
		justify-content: space-around;

		.day-item {
			width: 80rpx;
			height: 80rpx;
			border: 2rpx solid #e3e4e6;
			border-radius: 50%;
			box-sizing: border-box;

			color: #222222;
			font-size: 32rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			&.selected {
				border: 0;
				background-color: #ff6600;

				color: #ffffff;
			}
		}
	}

	&.holiday {
		padding: 20rpx 30rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;

		.holiday-label {
			font-size: 32rpx;
			color: #222222;
		}

		.holiday-switch {
		}
	}
}

.changeHometime-hint {
	padding: 0 30rpx;

	font-size: 28rpx;
	color: #707070;
}

.changeHometime-button {
	height: 88rpx;
	background-color: #ff6600;
	border-radius: 60rpx;
	margin: 0 30rpx 30rpx 30rpx;

	font-size: 36rpx;
	color: #ffffff;

	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
